<template>
<div>
  <div class="contain">
    <swiperCom></swiperCom>
    <!-- 文字 -->
    <div class="Mytitle">
      <h1>9月嗨购节</h1>
      <p>低至10万/套  购房送车位钜惠倒计时</p>
      
    </div>
    <!-- 文字 -->
    <div class="w">
      <div class="mainbox">
        <div class="box" v-for="item in formList" :key="item.id">
          <!-- 左边 -->
          <el-row type="flex" align-="center" class="left">
            <img :src="item.image" class="image" />
          </el-row>
          <!-- 右边 -->
          <div class="right">
            <div>
              <h2 class="title">{{ item.title }}</h2>
              <p class="address">{{ [item.address] }}</p>
              <div class="leirong">
                <p class="desc">{{ item.desc }}</p>
              </div>
              <div class="kuang">
                <span class="zaishou">在售</span>
                <span class="biehsu">别墅</span>
                <span class="quanbu">
                  <span>大型社区</span>&nbsp; <span>车位充足</span>&nbsp;
                  <span>南北通透</span>&nbsp; <span>厨卫全明</span>&nbsp;
                  <span>大户型</span>&nbsp;
                </span>
              </div>
              <!-- 负责顾问 -->
              <div class="fuze">
                <i class="zixun el-icon-user-solid"
                  >点击咨询:{{
                    item.agent ? item.agent.name || "无" : "1"
                  }}&nbsp;</i
                >
                <a href="" class="Ta el-icon-chat-dot-round">向Ta咨询:</a>
              </div>
            </div>
            <!-- 价格 -->
            <div class="price">
              <p>总价<span>10</span>万元/套起</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
   <!-- 底部 -->
    <div class="footPart">
      <div class="footer w">
        <div class="top">
          <div class="introduce">
            <div>
              <img src="" alt="" />
            </div>
            <div>
              <a href="/about">公司介绍</a>
              <a href="/about">专家答疑</a>
              <a href="/about">隐私协议</a>
              <a href="/about">免责声明</a>
              <a href="/about">联系我们</a>
            </div>
          </div>
          <el-divider></el-divider>
          <div class="detail">
            <div class="footer_info">
              <div>
                <span>广州市JENNY房地产代理有限公司</span>
                <span>邮箱：JENNY@six.com</span>
                <span>广东总部：广州市天河区珠吉路津安创意园219号</span>
                <!-- <div>北京道杰士投资咨询服务有限责任公司 | 网络经营许可证 京ICP备13049052号-2 | © Copyright© 2020 Sofang.com, All Rights Reserved |</div> -->
              </div>
              <div class="copyright">
                <span>Copyright ©2001-2022 JENNY HOUSE网版权所有</span>
                <span>粤ICP备11022641号</span>
                <span>粤公网安备 44049002000505号</span>
              </div>
            </div>
            <div class="footer_list">
              <div class="phone">
                <i class="el-icon-phone-outline"></i>
                服务热线：400-168-6666
              </div>
              <div class="timeWork">（周一至周日：8:30 - 18:30）</div>
            </div>
            <div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import swiperCom from "@/components/Swiper/swiperCom.vue";
import { getProperty } from "@/api/property";
export default {
  components: { swiperCom },
  data() {
    return {
      formList: [
        {
          image:
            "https://pic4.ajkimg.com/display/xinfang/f9c01b30a83404ba3408b0ead71a7b5f/180x135m.jpg",
          title: "老六之家",
          address: "广州",
          desc: "天河",
        },
      ],
      form: {
        id: "",
        image: "",
        desc: "",
      },
    };
  },
  created() {
    this.getPropertyList();
  },
  methods: {
    async getPropertyList() {
      const res = await getProperty();
      this.formList = res.data;
      console.log(res);
    },
  },
};
</script>

<style lang="scss" scoped>
.Mytitle {
  font-size: 22px;
  text-align: center;
  
  top:20%;
  right:30%;
    margin-top: -80px;
  // margin-bottom: 20px;
  //子绝
  position: absolute;
  z-index: 999;
  h1{
    font-size: 90px;
    color:#d94917;
    font-family: serif;
  }
  p{
    font-size: 40px;
    color: #fff;
  }
 
}
.contain {
  background-color: #f6f6f6;
  //父相
  position: relative;
}

.w {
  width: 1000px;
  //background-color: #f6f6f6;
  margin: 0 auto;
}
.box {
  display: flex;
  height: 200px;
  background-color: #ffffff;
  justify-content: start;
}
.left {
  width: 230px;
  border: 3px solid #f4f4f4;
}
.right {
  display: flex;
  width: 770px;
  border: 3px solid #f4f4f4;
}

.image {
  width: 100%;
  display: block;
  justify-content: center;
  // vertical-align: middle;
}
.title {
  padding-left: 15px;
  display: block;
  font-weight: 700;
  font-size: 25px;
  margin-bottom: 13px;
  margin-top: 10px;
  color: #333333;
}
.address {
  padding-left: 15px;
  color: #666666;
  margin-bottom: 8px;
}
.leirong {
  height: 35px;
}
.desc {
  padding-left: 15px;
  display: block;
  font-weight: 400;
  color: #666666;
  font-size: 14px;
  width: 450px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
/* 当鼠标移入box标签，改变box标签的背景颜色 */
.box:hover {
  background-color: #f6f6f6;
}
.kuang {
  display: flex;
}
::v-deep.zaishou {
  display: inline-block;
  width: 35px;
  height: 26px;
  background-color: #4863c4;
  font-size: 14px;
  text-align: center;
  line-height: 26px;
  color: #fff;
  margin-left: 25px;
  margin-right: 5px;
  margin-top: 15px;
}
::v-deep.biehsu {
  display: inline-block;
  width: 35px;
  height: 26px;
  background-color: #67cddb;
  font-size: 14px;
  text-align: center;
  line-height: 26px;
  color: #fff;
  margin-top: 15px;
  margin-right: 5px;
}
::v-deep.quanbu {
  display: flex;
  width: 340px;
  height: 26px;
  font-size: 16px;
  text-align: center;
  line-height: 26px;
  color: #c1c1c1;
  margin-top: 18px;
  margin-right: 5px;
}
.zixun {
  padding-left: 25px;
  font-size: 15px;
  color: #666666;
}
.fuze {
  margin-top: 6px;
  display: flex;
}
.Ta {
  text-decoration: none;
  margin-left: 10px;
  display: block;
  width: 90px;
  height: 22px;
  border: 1px solid #3a75ee;
  text-align: center;
  line-height: 22px;
  color: #3072f6;
  font-size: 16px;
  font-size: 14px;
  border-radius: 5px;
}
.price {
  width: 300px;
  height: 50px;
  // background-color: purple;
  margin: 30px 50px;

  p {
    color: #666666;
  }
  span {
    font-size: 40px;
    font-weight: 700;
    color: #fd4d39;
  }
}
 .footer {
  background-color: #292c34;
  // padding-top: 50px;
  .top {
    height: 230px;
    margin-left: 40px;
    margin-right: 40px;
    .introduce {
      height: 100px;
      line-height: 35px;
      // background-color: #0097ff;
      font-size: 18px;
      a {
        color: #fff;
        margin-left: 40px;
      }
    }
    .detail {
      display: flex;
      justify-content: space-between;
      text-align: left;
      color: #888b90;
      margin-top: 20px;
      .footer_info {
        span {
          margin-right: 30px;
        }
        .copyright {
          margin-top: 10px;
        }
      }
      .footer_list {
        .phone {
          font-size: 18px;
          color: #fff;
        }
        .timeWork {
          font-size: 13px;
          margin-left: 35px;
        }
      }
    }
  }
}
.footPart {
  background-color: #292c34;
}
.footer {
  margin-top: 80px;
  height: 230px;
}
</style>
